<template>
	<view>
		<!-- 轮播图 -->
		<swiper class="swiper" indicator-dots autoplay circular>
			<swiper-item v-for="(item,index) in detell.pics" :key="index">
				<image :src="item.pics_mid_url" mode="widthFix" @click="imgprev(item.pics_mid_url)"></image>
			</swiper-item>
		</swiper>
		<!-- 标题-价格 -->
		<view class="box1">
			<view>
				<text class="goods_price_wan">￥{{detell.goods_price}}</text>
				<text class="goods_price_to">￥{{detell.goods_price + 200}}</text>
				<text class="goods_number">库存:{{detell.goods_number}}</text>
			</view>
			<view class="goods_name">{{detell.goods_name}}</view>
		</view>
		<!-- 富文本 -->
		<rich-text :nodes="detell.goods_introduce"></rich-text>
		
	
	<!-- 占白区域 -->
	 <view style="height: 50px;"></view>
	 
	 <!-- 底部商品导航 -->
	  <view class="goodsnav">
		   <uni-goods-nav   :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
	 </view>
      
	   
	</view>
</template>

<script>
import uniGoodsNav from '../../uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				id: 0,
				detell: {},
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor:'#007aff',
					infoColor:"red"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
				  text: '加入购物车',
				  backgroundColor: '#ff0000',
				  color: '#fff'
				},
				{
				  text: '立即购买',
				  backgroundColor: '#ffa200',
				  color: '#fff'
				}
				],
			}
		},
	 components: {uniGoodsNav},
		onLoad(optivw) {
			// console.log(optivw)
			this.id = optivw.id
			this.getProductDetails()
		},
		methods: {
			onClick (e) {
			  uni.showToast({
			    title: `点击${e.content.text}`,
			    icon: 'none'
			  })
			},
			buttonClick (e) {
			  console.log(e)
			  this.options[2].info++
			},
			async getProductDetails() {
				let {
					data: res
				} = await this.$http.getProductDetail(this.id)
				this.detell = res.message
				// console.log(res)
			},
			//图片预览
			imgprev(ig){
				let urls = this.detell.pics.map(item => item.pics_mid_url)
				 uni.previewImage({
					 current:ig,
					 urls,
				 })
			},
		}
	}
</script>

<style scoped lang="scss">
	.swiper {
		width: 100%;
		height: 800rpx;
		
		image {
			width: 100%;
		}
	}

	

	.titel {
		text-align: center;
		font-size: 35rpx;
		color: #007AFF;
	}

	.goods_price_wan {
		color: red;
		font-size: 30rpx;
	}

	.goods_price_to {
		font-size: 25rpx;
		color: #ccc;
		text-decoration: line-through;
		margin-left: 17rpx;
	}
	.goods_name{
		font-size: 30rpx;
		margin: 20rpx 0;
	}
	.goods_number{
		float: right;
		font-size: 30rpx;
	}
	.box1{
		padding: 0 20rpx;
	}
	.goodsnav{
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
